<template>
    <a-card :size="config.props.size" :hoverable="config.props.FQ" :loading="config.props.lod" :class="{
        noBorder: !config.props.SL
    }" :style="{
        zIndex: config.props.FQ ? 10 : ''
    }">
        <template #title>
            <slot name="title">
                <div class="TitleBox">
                    <span :style="{
                        color: config.props.T_C,
                        fontSize: config.props.T_F,
                        fontFamily: config.props.T_FF,
                    }">{{ config.props.T_T }}</span>
                    <a-tooltip :placement="config.props.SP_D" :color="config.props.SP_BC" v-if="config.props.SP">
                        <template #title>
                            <span :style="{ color: config.props.SP_TC, fontSize: config.props.SP_IS }">
                                {{ config.props.SP_T }}
                            </span>
                        </template>
                        <PluginComp Plugin="VisualEditor-Core.AntdIcon" class="C-Icon" :type="config.props.SP_I"
                            :style="{ color: config.props.SP_IC, fontSize: config.props.SP_IS }" />
                        <!-- <span class="C-Icon">&#xe6dc;</span> -->
                    </a-tooltip>
                    <slot name="subtitle" style="font-weight: normal;" v-if="config.props.SS"></slot>
                </div>
            </slot>
        </template>
        <template #extra v-if="config.props.SE">
            <slot name="extra"></slot>
        </template>
        <slot></slot>
    </a-card>
</template>

<script setup>
import { inject, watch } from 'vue';

const props = defineProps(["config", "field"])
const StateEvent = inject('StateEvent');

watch(() => props.config.props.SS, (val) => {
    if (val) {
        StateEvent.AddSlot('Layout-Container', props.field, 'subtitle', '副标题插槽')
    } else {
        delete props.config.slots.subtitle
    }
})

watch(() => props.config.props.SE, (val) => {
    if (val) {
        StateEvent.AddSlot('Layout-Container', props.field, 'extra', '扩展区插槽')
    } else {
        delete props.config.slots.extra
    }
})

</script>

<style lang="less" scoped>
.C-Icon {
    margin: 0 8px;
    cursor: pointer;
}

.TitleBox {
    display: flex;
    align-items: center
}


.noBorder {
    :deep(.ant-card-head) {
        border: none;
    }
}
</style>